<template>
  <view class="category-container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">分类管理</text>
      <text class="close-btn" @tap="navigateBack">×</text>
    </view>

    <!-- 主内容区域 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 分类搜索 -->
      <view class="category-search">
        <view class="search-input-wrapper">
          <text class="search-icon">🔍</text>
          <input 
            class="search-input" 
            placeholder="搜索分类..." 
            v-model="searchKeyword"
            @input="searchCategories"
          />
          <text class="clear-search" v-if="searchKeyword" @tap="clearSearch">×</text>
        </view>
      </view>

      <!-- 分类列表 -->
      <view class="category-list">
        <text class="section-title">已创建分类</text>
        <view class="category-items">
          <view 
            v-for="(category, index) in filteredCategories" 
            :key="category.id" 
            class="category-item"
            :style="{ paddingLeft: getCategoryIndent(category) + 'rpx' }"
            @touchstart="startDrag(index)"
            @touchmove="onDragMove"
            @touchend="endDrag"
            :class="{ 'dragging': draggingIndex === index }"
          >
            <!-- 拖拽手柄 -->
            <view class="drag-handle">⋮⋮</view>
            
            <!-- 分类名称和层级指示 -->
            <view class="category-info">
              <text class="category-level-indicator" v-if="category.parentId > 0">└─</text>
              <text class="category-name">{{ category.name }}</text>
              <text class="item-count">({{ getCategoryItemCount(category.id) }} 项)</text>
            </view>
            
            <!-- 分类操作按钮 -->
            <view class="category-actions">
              <text class="view-btn" @tap="viewCategoryContents(category)">查看</text>
              <text class="edit-btn" @tap="editCategory(index)">编辑</text>
              <text class="delete-btn" @tap="deleteCategory(index)">删除</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 添加新分类 -->
      <view class="add-category">
        <text class="section-title">添加新分类</text>
        <view class="add-form">
          <!-- 选择父分类 -->
          <view class="parent-category-selector">
            <text class="selector-label">选择父分类</text>
            <view class="selector-wrapper">
              <picker 
                mode="selector" 
                :range="availableParentCategories" 
                :range-key="'name'"
                @change="onParentCategoryChange"
                value="-1"
              >
                <view class="picker-item">
                  {{ selectedParentCategory ? selectedParentCategory.name : '无父分类' }}
                </view>
              </picker>
            </view>
          </view>
          
          <!-- 输入分类名称 -->
          <input 
            class="category-input" 
            placeholder="请输入分类名称" 
            v-model="newCategoryName"
            @confirm="addCategory"
          />
          <button class="add-btn" @tap="addCategory">添加</button>
        </view>
      </view>
      
      <!-- 分类内容排序 -->
      <view class="category-contents" v-if="selectedCategoryForContents">
        <text class="section-title">{{ selectedCategoryForContents.name }} 的内容排序</text>
        <view class="section-actions">
          <text class="back-btn" @tap="backToCategories">返回分类列表</text>
        </view>
        
        <!-- 内容列表（支持拖拽排序） -->
        <view class="contents-list">
          <view 
            v-for="(content, index) in categoryContents"
            :key="index"
            class="content-item"
            @touchstart="startContentDrag(index)"
            @touchmove="onContentDragMove"
            @touchend="endContentDrag"
            :class="{ 'dragging': contentDraggingIndex === index }"
          >
            <view class="drag-handle">⋮⋮</view>
            <text class="content-text">{{ content.content }}</text>
            <text class="content-time">{{ content.time }}</text>
          </view>
        </view>
      </view>

      <!-- 标签管理 -->
      <view class="tags-management">
        <text class="section-title">标签管理</text>
        <text class="view-all-tags" @tap="navigateToTagsManagement">查看全部标签 >></text>
        <view class="tags-cloud">
          <text 
            v-for="tag in allTags" 
            :key="tag" 
            class="tag-item"
            @tap="editTag(tag)"
          >
            {{ tag }} ({{ getTagItemCount(tag) }})
            <text class="remove-tag" @tap.stop="removeTag(tag)">×</text>
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CategoryManagementPage',
  data() {
    return {
      // 分类列表 - 更新为支持父子分类关系
      categories: [
        { id: 1, name: '学习笔记', parentId: 0, order: 1 },
        { id: 2, name: '技术总结', parentId: 0, order: 2 },
        { id: 3, name: '生活记录', parentId: 0, order: 3 },
        { id: 4, name: '其他', parentId: 0, order: 4 }
      ],
      // 标签列表
      allTags: ['Vue3', '前端', 'uni-app', '跨平台', '开发', 'JavaScript', 'CSS', 'HTML', 'React', 'Node.js'],
      // 搜索相关
      searchKeyword: '',
      filteredCategories: [],
      // 添加新分类相关
      newCategoryName: '',
      selectedParentCategory: null,
      // 所有消息数据（从收集页面获取的模拟数据）
      messages: [
        {
          content: 'Vue3组合式API的使用技巧',
          time: '10:30',
          category: '学习笔记',
          categoryId: 1,
          tags: ['Vue3', '前端']
        },
        {
          content: 'uni-app跨平台开发经验总结',
          time: '昨天',
          category: '技术总结',
          categoryId: 2,
          tags: ['uni-app', '跨平台', '开发']
        }
      ],
      // 拖拽排序相关
      draggingIndex: -1,
      startY: 0,
      // 分类内容排序相关
      selectedCategoryForContents: null,
      categoryContents: [],
      contentDraggingIndex: -1,
      contentStartY: 0
    };
  },
  onLoad() {
    // 加载保存的分类和标签数据
    this.loadCategories();
    this.loadTags();
    
    // 加载消息数据（实际应用中可能需要从全局状态或本地存储获取）
    this.loadMessages();
    
    // 初始化过滤后的分类列表
    this.filteredCategories = this.getSortedCategories();
  },
  
  computed: {
    // 可用的父分类（排除自身和子分类）
    availableParentCategories() {
      // 获取所有顶级分类（parentId为0的分类）
      const topLevelCategories = this.categories.filter(cat => cat.parentId === 0);
      // 添加一个特殊选项表示没有父分类
      return [{ id: 0, name: '无父分类' }, ...topLevelCategories];
    }
  },
  methods: {
    // 加载分类数据
    loadCategories() {
      // 在实际应用中，这里应该从本地存储或服务器加载数据
      const savedCategories = uni.getStorageSync('categories');
      if (savedCategories) {
        try {
          this.categories = JSON.parse(savedCategories);
        } catch (e) {
          console.error('解析分类数据失败', e);
        }
      }
    },
    
    // 加载标签数据
    loadTags() {
      // 在实际应用中，这里应该从本地存储或服务器加载数据
      const savedTags = uni.getStorageSync('tags');
      if (savedTags) {
        try {
          this.allTags = JSON.parse(savedTags);
        } catch (e) {
          console.error('解析标签数据失败', e);
        }
      }
    },
    
    // 加载消息数据
    loadMessages() {
      // 在实际应用中，这里应该从全局状态或本地存储获取
      const savedMessages = uni.getStorageSync('messages');
      if (savedMessages) {
        try {
          this.messages = JSON.parse(savedMessages);
        } catch (e) {
          console.error('解析消息数据失败', e);
        }
      }
    },
    
    // 获取排序后的分类列表（按层级和顺序排序）
    getSortedCategories() {
      // 先按父ID和order排序
      const sorted = [...this.categories].sort((a, b) => {
        if (a.parentId !== b.parentId) {
          return a.parentId - b.parentId;
        }
        return a.order - b.order;
      });
      
      // 如果有搜索关键词，进行过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase().trim();
        return sorted.filter(category => 
          category.name.toLowerCase().includes(keyword)
        );
      }
      
      return sorted;
    },
    
    // 搜索分类
    searchCategories() {
      this.filteredCategories = this.getSortedCategories();
    },
    
    // 清空搜索
    clearSearch() {
      this.searchKeyword = '';
      this.filteredCategories = this.getSortedCategories();
    },
    
    // 获取分类的缩进（用于显示层级关系）
    getCategoryIndent(category) {
      if (category.parentId === 0) return 0;
      
      // 查找父分类
      const parent = this.categories.find(cat => cat.id === category.parentId);
      if (!parent) return 40;
      
      // 递归计算缩进（每个层级增加40rpx）
      let indent = 40;
      if (parent.parentId > 0) {
        indent += this.getCategoryIndent(parent);
      }
      
      return indent;
    },
    
    // 添加新分类
    addCategory() {
      if (!this.newCategoryName.trim()) {
        uni.showToast({
          title: '分类名称不能为空',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 检查分类是否已存在
      const exists = this.categories.some(cat => cat.name === this.newCategoryName.trim());
      if (exists) {
        uni.showToast({
          title: '该分类已存在',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 添加新分类
      const newId = Math.max(...this.categories.map(cat => cat.id), 0) + 1;
      const parentId = this.selectedParentCategory ? this.selectedParentCategory.id : 0;
      
      // 计算新分类的order
      const siblingCategories = this.categories.filter(cat => cat.parentId === parentId);
      const newOrder = siblingCategories.length + 1;
      
      this.categories.push({
        id: newId, 
        name: this.newCategoryName.trim(),
        parentId: parentId,
        order: newOrder
      });
      
      // 更新过滤后的分类列表
      this.filteredCategories = this.getSortedCategories();
      
      // 保存到本地存储
      this.saveCategories();
      
      // 清空输入框和选择
      this.newCategoryName = '';
      this.selectedParentCategory = null;
      
      // 显示提示
      uni.showToast({
        title: '分类添加成功',
        icon: 'success',
        duration: 2000
      });
    },
    
    // 选择父分类
    onParentCategoryChange(e) {
      const index = e.detail.value;
      if (index === 0) {
        this.selectedParentCategory = null;
      } else {
        this.selectedParentCategory = this.availableParentCategories[index];
      }
    },
    
    // 编辑分类
    editCategory(index) {
      const category = this.filteredCategories[index];
      const originalIndex = this.categories.findIndex(cat => cat.id === category.id);
      
      // 创建一个编辑弹窗，包含分类名称和父分类选择
      const that = this;
      uni.showModal({
        title: '编辑分类',
        content: '请输入新的分类名称',
        editable: true,
        placeholderText: category.name,
        success: res => {
          if (res.confirm && res.content.trim()) {
            // 检查新名称是否已存在
            const exists = that.categories.some((cat, i) => 
              i !== originalIndex && cat.name === res.content.trim()
            );
            if (exists) {
              uni.showToast({
                title: '该分类已存在',
                icon: 'none',
                duration: 2000
              });
              return;
            }
            
            // 更新分类名称
            const oldName = category.name;
            category.name = res.content.trim();
            that.categories[originalIndex].name = res.content.trim();
            
            // 同时更新消息中的分类
            that.messages.forEach(message => {
              if (message.category === oldName) {
                message.category = category.name;
              }
              if (message.categoryId === category.id) {
                message.category = category.name;
              }
            });
            
            // 保存到本地存储
            that.saveCategories();
            that.saveMessages();
            
            // 更新过滤后的分类列表
            that.filteredCategories = that.getSortedCategories();
            
            // 显示提示
            uni.showToast({
              title: '分类更新成功',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 删除分类
    deleteCategory(index) {
      const category = this.filteredCategories[index];
      const originalIndex = this.categories.findIndex(cat => cat.id === category.id);
      
      // 检查是否有子分类
      const hasChildren = this.categories.some(cat => cat.parentId === category.id);
      if (hasChildren) {
        uni.showToast({
          title: '该分类下有子分类，无法删除',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      const count = this.getCategoryItemCount(category.id);
      
      let confirmText = '确定要删除这个分类吗？';
      if (count > 0) {
        confirmText += ` 该分类下有 ${count} 项内容，删除后这些内容将变为无分类状态。`;
      }
      
      const that = this;
      uni.showModal({
        title: '删除分类',
        content: confirmText,
        success: res => {
          if (res.confirm) {
            // 从分类列表中删除
            that.categories.splice(originalIndex, 1);
            
            // 更新消息中的分类（将该分类的消息设为无分类）
            that.messages.forEach(message => {
              if (message.category === category.name || message.categoryId === category.id) {
                message.category = '';
                message.categoryId = 0;
              }
            });
            
            // 保存到本地存储
            that.saveCategories();
            that.saveMessages();
            
            // 更新过滤后的分类列表
            that.filteredCategories = that.getSortedCategories();
            
            // 显示提示
            uni.showToast({
              title: '分类已删除',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 编辑标签
    editTag(tag) {
      uni.showModal({
        title: '编辑标签',
        content: '请输入新的标签名称',
        editable: true,
        placeholderText: tag,
        success: res => {
          if (res.confirm && res.content.trim()) {
            // 检查新名称是否已存在
            if (this.allTags.includes(res.content.trim())) {
              uni.showToast({
                title: '该标签已存在',
                icon: 'none',
                duration: 2000
              });
              return;
            }
            
            // 更新标签名称
            const tagIndex = this.allTags.indexOf(tag);
            if (tagIndex !== -1) {
              this.allTags[tagIndex] = res.content.trim();
            }
            
            // 同时更新消息中的标签
            this.messages.forEach(message => {
              const messageTagIndex = message.tags.indexOf(tag);
              if (messageTagIndex !== -1) {
                message.tags[messageTagIndex] = res.content.trim();
              }
            });
            
            // 保存到本地存储
            this.saveTags();
            this.saveMessages();
            
            // 显示提示
            uni.showToast({
              title: '标签更新成功',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 删除标签
    removeTag(tag) {
      const count = this.getTagItemCount(tag);
      
      let confirmText = '确定要删除这个标签吗？';
      if (count > 0) {
        confirmText += ` 该标签被 ${count} 项内容使用，删除后这些内容将不再包含该标签。`;
      }
      
      uni.showModal({
        title: '删除标签',
        content: confirmText,
        success: res => {
          if (res.confirm) {
            // 从标签列表中删除
            const tagIndex = this.allTags.indexOf(tag);
            if (tagIndex !== -1) {
              this.allTags.splice(tagIndex, 1);
            }
            
            // 从所有消息中移除该标签
            this.messages.forEach(message => {
              const messageTagIndex = message.tags.indexOf(tag);
              if (messageTagIndex !== -1) {
                message.tags.splice(messageTagIndex, 1);
              }
            });
            
            // 保存到本地存储
            this.saveTags();
            this.saveMessages();
            
            // 显示提示
            uni.showToast({
              title: '标签已删除',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 拖拽排序 - 开始拖拽
    startDrag(index) {
      this.draggingIndex = index;
      this.startY = event.touches[0].clientY;
    },
    
    // 拖拽排序 - 拖拽中
    onDragMove(event) {
      if (this.draggingIndex === -1) return;
      
      const currentY = event.touches[0].clientY;
      const diffY = currentY - this.startY;
      
      // 这里可以实现视觉上的跟随效果
      // 实际的排序在touchend时处理
    },
    
    // 拖拽排序 - 结束拖拽
    endDrag(event) {
      if (this.draggingIndex === -1) return;
      
      const endY = event.changedTouches[0].clientY;
      const diffY = endY - this.startY;
      
      // 只有当拖拽距离足够大时才触发排序
      if (Math.abs(diffY) < 20) {
        this.draggingIndex = -1;
        return;
      }
      
      // 确定目标位置
      const targetIndex = this.draggingIndex + (diffY > 0 ? 1 : -1);
      
      if (targetIndex >= 0 && targetIndex < this.filteredCategories.length) {
        // 获取要交换的两个分类
        const category1 = this.filteredCategories[this.draggingIndex];
        const category2 = this.filteredCategories[targetIndex];
        
        // 只有当两个分类有相同的父分类时才能交换顺序
        if (category1.parentId === category2.parentId) {
          // 交换order值
          const tempOrder = category1.order;
          category1.order = category2.order;
          category2.order = tempOrder;
          
          // 在原始categories数组中更新
          const originalIndex1 = this.categories.findIndex(cat => cat.id === category1.id);
          const originalIndex2 = this.categories.findIndex(cat => cat.id === category2.id);
          this.categories[originalIndex1].order = category1.order;
          this.categories[originalIndex2].order = category2.order;
          
          // 保存到本地存储
          this.saveCategories();
          
          // 重新排序分类列表
          this.filteredCategories = this.getSortedCategories();
        }
      }
      
      this.draggingIndex = -1;
    },
    
    // 查看分类内容
    viewCategoryContents(category) {
      // 获取该分类下的所有内容
      this.categoryContents = this.messages.filter(message => 
        message.categoryId === category.id || message.category === category.name
      );
      
      // 保存当前选择的分类
      this.selectedCategoryForContents = category;
    },
    
    // 返回分类列表
    backToCategories() {
      this.selectedCategoryForContents = null;
      this.categoryContents = [];
    },
    
    // 拖拽排序内容 - 开始拖拽
    startContentDrag(index) {
      this.contentDraggingIndex = index;
      this.contentStartY = event.touches[0].clientY;
    },
    
    // 拖拽排序内容 - 拖拽中
    onContentDragMove(event) {
      if (this.contentDraggingIndex === -1) return;
      
      const currentY = event.touches[0].clientY;
      const diffY = currentY - this.contentStartY;
      
      // 这里可以实现视觉上的跟随效果
      // 实际的排序在touchend时处理
    },
    
    // 拖拽排序内容 - 结束拖拽
    endContentDrag(event) {
      if (this.contentDraggingIndex === -1) return;
      
      const endY = event.changedTouches[0].clientY;
      const diffY = endY - this.contentStartY;
      
      // 只有当拖拽距离足够大时才触发排序
      if (Math.abs(diffY) < 20) {
        this.contentDraggingIndex = -1;
        return;
      }
      
      // 确定目标位置
      const targetIndex = this.contentDraggingIndex + (diffY > 0 ? 1 : -1);
      
      if (targetIndex >= 0 && targetIndex < this.categoryContents.length) {
        // 交换内容位置
        const temp = this.categoryContents[this.contentDraggingIndex];
        this.categoryContents.splice(this.contentDraggingIndex, 1);
        this.categoryContents.splice(targetIndex, 0, temp);
        
        // 在原始messages数组中更新（实际应用中可能需要更复杂的处理）
        // 这里简化处理，实际应用中可能需要更新每条消息的排序字段
        
        // 保存到本地存储
        this.saveMessages();
      }
      
      this.contentDraggingIndex = -1;
    },
    
    // 获取分类下的内容数量
    getCategoryItemCount(categoryId) {
      return this.messages.filter(message => 
        message.categoryId === categoryId || 
        (message.category && this.categories.find(cat => cat.id === categoryId && cat.name === message.category))
      ).length;
    },
    
    // 获取标签下的内容数量
    getTagItemCount(tagName) {
      return this.messages.filter(message => message.tags.includes(tagName)).length;
    },
    
    // 保存分类数据
    saveCategories() {
      uni.setStorageSync('categories', JSON.stringify(this.categories));
    },
    
    // 保存标签数据
    saveTags() {
      uni.setStorageSync('tags', JSON.stringify(this.allTags));
    },
    
    // 保存消息数据
    saveMessages() {
      uni.setStorageSync('messages', JSON.stringify(this.messages));
    },
    
    // 跳转到标签管理页面
    navigateToTagsManagement() {
      uni.navigateTo({
        url: '/pages/category/tags'
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
/* 页面容器样式 */
.category-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #666;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主内容区域样式 */
.content {
  flex: 1;
}

/* 分区标题样式 */
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

/* 分类搜索样式 */
.category-search {
  margin-bottom: 30rpx;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.search-icon {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  border: none;
  outline: none;
  font-size: 28rpx;
}

.clear-search {
  font-size: 32rpx;
  color: #999;
  padding: 0 10rpx;
}

/* 分类列表样式 */
.category-list,
.add-category,
.tags-management {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

/* 分类项样式 */
.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  transition: all 0.3s;
}

.category-item:active {
  background-color: #f5f5f5;
}

.category-item:last-child {
  border-bottom: none;
}

/* 拖拽手柄样式 */
.drag-handle {
  color: #ccc;
  font-size: 28rpx;
  padding: 0 10rpx;
  user-select: none;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex: 1;
}

.category-level-indicator {
  color: #ccc;
  font-size: 24rpx;
}

.category-name {
  font-size: 28rpx;
  color: #333;
}

.item-count {
  font-size: 24rpx;
  color: #999;
}

.category-actions {
  display: flex;
  gap: 20rpx;
}

.view-btn,
.edit-btn,
.delete-btn {
  padding: 6rpx 20rpx;
  font-size: 24rpx;
  border-radius: 4rpx;
}

.view-btn {
  background-color: #5856d6;
  color: #fff;
}

.edit-btn {
  background-color: #007aff;
  color: #fff;
}

.delete-btn {
  background-color: #ff3b30;
  color: #fff;
}

/* 添加新分类样式 */
.add-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.parent-category-selector {
  margin-bottom: 10rpx;
}

.selector-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.selector-wrapper {
  background-color: #f5f5f5;
  border-radius: 10rpx;
  overflow: hidden;
}

.picker-item {
  padding: 20rpx;
  font-size: 28rpx;
}

.category-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.add-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 28rpx;
}

/* 分类内容样式 */
.category-contents {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.section-actions {
  margin-bottom: 20rpx;
}

.back-btn {
  padding: 10rpx 20rpx;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  display: inline-flex;
  align-items: center;
  font-size: 26rpx;
}

.contents-list {
  margin-top: 20rpx;
}

.content-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.content-item:active {
  background-color: #f5f5f5;
}

.content-item:last-child {
  border-bottom: none;
}

.content-text {
  font-size: 28rpx;
  flex: 1;
  margin-right: 20rpx;
}

.content-time {
  color: #999;
  font-size: 24rpx;
}

/* 标签管理样式 */
  .view-all-tags {
    font-size: 26rpx;
    color: #007aff;
    margin-bottom: 15rpx;
    display: block;
  }
  
  .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;
  }

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #f0f0f0;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #333;
  position: relative;
}

.remove-tag {
  margin-left: 10rpx;
  font-size: 30rpx;
  color: #999;
}

.remove-tag:active {
  color: #ff3b30;
}

/* 拖拽排序效果 */
.dragging {
  opacity: 0.6;
  background-color: #f0f0f0;
  transform: scale(1.01);
}

.content-dragging {
  opacity: 0.6;
  background-color: #f0f0f0;
  transform: scale(1.01);
}
</style>